AngularJSとRuby on Railsで作るCRUDアプリ – (1)環境構築

t.hondaです。AngularJSとRailsの勉強がてら、CRUD機能を持つサンプルプログラムを作ってみました。
ウィスキーの名前と価格を、登録して表示するアプリです。

先ずは開発するための環境を構築する手順を、メモ書き程度に書いておきます。

「開発するため」なので、AugularJS側、及びRails側でユニットテストも実行できる環境を整えたいと思います。
また、ViewにはTwitter Bootstrapを使用します。

では、手順です。

プロジェクト作成

0.(rails new などでRailsアプリケーションを作成)

1.Gemfileに以下を追加

gem 'therubyracer'
gem 'execjs'
gem "twitter-bootstrap-rails"
gem "less-rails"

group :development,:test do 
  gem 'rspec-rails'
end	

2.Gemfileに記述したものをインストール。

$ bundle install

3.RSpecをInitializeする。

$ rails generate rspec:install

4.Twitter BootstrapをInitializeする。

$ rails g bootstrap:install

5.Twitter Bootstrapを適用する。

$ rails g bootstrap:layout application fixed

「conflict app/views/layouts/application.html.erb」と言われるので、「Y」で上書きする。

6.app\assets\stylesheets\bootstrap_and_overrides.css.less に以下を追加する。

body { padding-top: 60px; }

7.コントローラを作成する。

$ rails g controller whiskies index

8.routes.rbに以下を記述する。

root "whiskies#index"

9.アプリを起動し、indexページが表示されることを確認する。

AngularJSの適用

1.開発用のスケルトン「angular-seed project」のzipを以下からダウンロードする。
angular / angular-seed

2.zipを解凍し、vender\assets\javascriptsに「ngapp」と名前を変えてコピーする。
※以下はAngularJSのユニットテストを実行する場合に必要です。

3.AngularJSのチュートリアルを以下のサイトからダウンロードする。
angular / angular-phonecat

4.解凍し、「node_modules」フォルダを「ngapp」フォルダにコピーする。

追記

最新の「angular-phonecat」には「node_modules」フォルダが含まれていないようです。その場合、下記手順で用意してください。

1. 上記リンクよりangular-phonecatを取得する。
2. angular-phonecatに移動し、以下のコマンドを実行する。

$ npm install

3. 「node_modules」フォルダが作成されるので、「ngapp」フォルダにコピーする。
4. (次の記事などで)テストを実行して以下のワーニングが出た場合は、メッセージに従い必要なものをインストールしてください。

ワーニング

WARN [plugin]: Cannot find plugin "karma-junit-reporter".
  Did you forget to install it ?
  npm install karma-junit-reporter --save-dev
WARN [plugin]: Cannot find plugin "karma-firefox-launcher".
  Did you forget to install it ?
  npm install karma-firefox-launcher --save-dev

インストール

$ cd node_modules/
$ npm install karma-junit-reporter --save-dev
$ npm install karma-firefox-launcher --save-dev

最後に

以上です。今回はYEOMAMなどを使用せず、ベタにAngularJSをフォルダ毎コピーする形で
環境を構築してみました。アプリのソースについては、また次回。。。